<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    <button onclick="testJQueryAjax()">测试ajax</button>

    <div id="info"></div>

    <script>

        // jQuery的Ajax
        function testJQueryAjax() {
            $.get("json_info.json",function(data,status) {
                alert("数据: " + data + "\n状态: " + status)
                console.log(data)
            })
        }

        // 原生Ajax
        function testAjax() {
            // 1、创建XMLHttpRequest对象
            let xmlHttp = new XMLHttpRequest();
            // 2、将状态触发器绑定到一个函数
            xmlHttp.onreadystatechange = dealResponse;

            //3、使用open方法建立与服务器的连接
            xmlHttp.open("GET", "json_info.json");

            //4、向服务器端发送数据
            xmlHttp.send();

            // 5、在回调函数中对返回数据进行处理
            function dealResponse() {
                if (xmlHttp.readyState===4 && xmlHttp.status===200) {
                    console.log(xmlHttp.responseText)
                    document.getElementById("info").innerText = xmlHttp.responseText;
                }
            }
        }




        // json对象构建
        let stuJson = {"name" : "张三", "age": 18};

        console.log(stuJson.name);

        console.log(stuJson["name"]);

        let stuJsonArr = [
            {"name" : "张三", "age": 18},
            {"name" : "李四", "age": 20}
        ];

        for(let i = 0; i < stuJsonArr.length; i++){
            console.log(stuJsonArr[i].name);
        }
    </script>
</body>
</html>
